<div ng-controller="menuCtrl">
	<p class="help-wx">
		<i class="fa fa-info-circle fa-fw"></i>&{'weixin.menu.notice.1'}<br>
		<i class="fa fa-info-circle fa-fw"></i>&{'weixin.menu.notice.2'}<br>
		<i class="fa fa-info-circle fa-fw"></i>&{'weixin.menu.notice.3'}<br>
		<i class="fa fa-info-circle fa-fw"></i>&{'weixin.menu.notice.4'}
	</p>

	<div class="navbar navbar-inverse navbar-menu">
		<div class="container-fluid">
			<div class="nav-collapse">
				<ul class="nav navbar-nav">
					<li class="dropdown" ng-repeat="menu in menus">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">
							<i class="fa fa-minus-square-o" ng-click="del(menu, menus)" ng-if="menu.children.length === 0"></i>
							<i class="fa fa-pencil-square-o" ng-click="edit(menu, menus)"></i>
							<span>{{menu.name}}</span>
							<span class="caret"></span>
						</a>
						<ul class="dropdown-menu">
							<li ng-repeat="m in menu.children">
								<a href="#">
									<i class="fa fa-minus-square-o" ng-click="del(m, menu.children)"></i>
									<i class="fa fa-pencil-square-o" ng-click="edit(m, menu.children)"></i>
									<span>{{m.name}}</span>
								</a>
							</li>
							<li ng-if="menu.children.length < 5">
								<a href="#" ng-click="add(menu)">
									<i class="fa fa-plus"></i>
									<span>&{'app.common.button.add'}</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
				<ul class="nav navbar-nav navbar-right" ng-if="menus.length < 3">
					<li>
						<a href="#" ng-click="add()">
							<i class="fa fa-plus"></i>
							<span>&{'app.common.button.add'}</span>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	
	<div class="single-btn">
		<button type="button" class="btn btn-success" ng-click="publish()">&{'weixin.menu.button.publish'}</button>
	</div>

	<div class="panel panel-default fade-animate" ng-if="mode(['form'])">
		<div class="panel-body">
			<form id="menu-data-form" name="menuForm" action="#" method="post" class="form-horizontal form-wx" novalidate>
				<div class="form-group" ng-class="hasError(menuForm.name)">
					<label for="name" class="col-sm-2 control-label"><strong>*</strong>&{'weixin.menu.name'}</label>
					<div class="col-sm-4">
						<input id="name" name="name" type="text" class="form-control" ng-model="menu.name" required>
						<p class="help-block fade-animate" ng-if="isError(menuForm.name, 'required')"><i class="fa fa-exclamation-triangle"></i> &{'weixin.menu.name.failure.required'}</p>
					</div>
				</div>
				<div class="form-group" ng-class="hasError(menuForm.type)">
					<label for="type" class="col-sm-2 control-label"><strong>*</strong>&{'weixin.menu.type'}</label>
					<div class="col-sm-2">
						<select id="type" name="type" class="form-control" ng-model="menu.typeO" ng-options="type.name for type in types"></select>
						<p class="help-block fade-animate" ng-if="isError(menuForm.type, 'required')"><i class="fa fa-exclamation-triangle"></i> &{'weixin.menu.type.failure.required'}</p>
					</div>
				</div>
				<div class="form-group" ng-class="hasError(menuForm.order)">
					<label for="order" class="col-sm-2 control-label"><strong>*</strong>&{'weixin.menu.order'}</label>
					<div class="col-sm-1">
						<input id="order" name="order" type="number" class="form-control" ng-model="menu.order" min="0">
					</div>
				</div>
				<div class="form-group" ng-class="hasError(menuForm.key)" ng-if="menu.typeO.key==='click'">
					<label for="key" class="col-sm-2 control-label"><strong>*</strong>&{'weixin.menu.key'}</label>
					<div class="col-sm-4">
						<input id="key" name="key" type="text" class="form-control" ng-model="menu.key" required>
						<p class="help-block fade-animate" ng-if="isError(menuForm.key, 'required')"><i class="fa fa-exclamation-triangle"></i> &{'weixin.menu.key.failure.required'}</p>
					</div>
				</div>
				<div class="form-group" ng-class="hasError(menuForm.url)" ng-if="menu.typeO.key==='view'">
					<label for="url" class="col-sm-2 control-label"><strong>*</strong>&{'weixin.menu.url'}</label>
					<div class="col-sm-8">
						<textarea id="url" name="url" rows="3" class="form-control" ng-model="menu.url" required></textarea>
						<p class="help-block fade-animate" ng-if="isError(menuForm.url, 'required')"><i class="fa fa-exclamation-triangle"></i> &{'weixin.menu.url.failure.required'}</p>
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-10 col-sm-offset-2">
						<button type="button" class="btn btn-success" ng-click="save()" ng-disabled="btnDisabled(menuForm)">
							<span ng-if="btn(['wait'])">&{'app.common.button.save'}</span>
							<span ng-if="btn(['doing'])"><i class="fa fa-spinner fa-spin"></i> &{'app.common.button.doing'}</span>
						</button>
						<button type="button" class="btn btn-default" ng-click="cancel()">&{'app.common.button.cancel'}</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	
	<alert></alert>
</div>

<script type="text/javascript">
'use strict'
var menuCtrl = ['$scope', '$http', function($scope, $http) {
	// 定义方法
	angular.extend($scope, {
		init: function() {
			// 初始化选项
			$scope.types = [
				{key: 'click', name: '点击'},
				{key: 'view', name: '跳转地址'},
			];
			
			// 加载数据
			$http({
				method: 'get',
				url: '@{Weixins.menu_search}',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}).success(function(data) {
				$scope.menus = data;
			});
		}, add: function(parent) {
			$scope.mode('form');
			$scope.btn('wait');
			$scope.parent = angular.isDefined(parent) ? parent.children : $scope.menus;
			$scope.menu = angular.isDefined(parent) ? {parent: parent.id, order: 0} : {order: 0};
		}, edit: function(menu, parent) {
			// 
			$scope.mode('form');
			$scope.btn('wait');
			$scope.parent = parent;
			$scope.menu = menu;
			
			// 
			angular.forEach($scope.types, function(v, i) {
				if (menu.type === v.key) {
					$scope.menu.typeO = v;
					return;
				}
			});
		}, btnDisabled: function(form) {
			return (form.$invalid || $scope.btn(['doing']));
		}, save: function() {
			$scope.menu.type = $scope.menu.typeO.key;
			$http({
				method: 'post',
				url: '@{Weixins.menu_save}',
				data: jQuery.param($scope.menu),
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}).success(function(data) {
				if (!$scope.update(data, $scope.parent)) {
					$scope.parent.push(data);
				}
				$scope.cancel();
			});
		}, del: function(menu, array) {
			$http({
				method: 'get',
				url: '@{Weixins.menu_delete}?id=' + menu.id,
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}).success(function(data) {
				$scope.remove(menu, array);
			});
		}, publish: function() {
			// 处理中
			$scope.btn('doing');
			$scope.setAlert({
				type: 'info',
				message: '<i class="fa fa-spinner fa-spin"></i> &{'app.common.button.doing'}'
			});
			
			// 提交请求
			$http({
				method: 'get',
				url: '@{Weixins.menu_publish}',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'}
			}).success(function(data) {
				$scope.btn('wait');
				$scope.setAlert({
					type: 'success',
					message: '<i class="fa fa-check-circle"></i> 发布成功~',
					delay: 3000
				});
			});
		}, cancel: function() {
			$scope.mode('');
		}
	});
	
	// 初始化
	$scope.init();
}];
</script>
